import styled from "styled-components";

export const HeaderWrap = styled.div`
    height: 75px;
    width: 100%;
`;

export const HeaderTopWrap = styled.div`
    height: 70px;
    background-color: #242424;
    border-bottom: 1px solid #c20c0c;
`;

export const HeaderTopContentWrap = styled.div`
    width: 1100px;
    margin: 0 auto;
    height: 70px;
    display: flex;

    .item {
        display: block;
        position: relative;
        a {
            text-decoration: none;
            height: 100%;
            padding: 0 19px;
            line-height: 69px;
            font-size: 14px;
            color: #ccc;
            height: 69px;
            display: block;
        }
        .item-selected {
            color: white;
            background: #000000;
            .icon {
                position: absolute;
                display: inline-block;
                width: 12px;
                height: 7px;
                bottom: 0px;
                left: 50%;
                transform: translate(-50%, 0);
                background-position: -226px 0;
            }
        }
        a:hover{
            background: #000000;
        }
    }

    .hotWrapper {
        position: relative;
        .hot {
            position: absolute;
            width: 28px;
            height: 19px;
            background-image: url(${require("@/assets/img/sprite_01.png")});
            background-position: -190px 0;
            top: 20px;
            right: -18px;
        }
    }
`;

export const HeaderTopContentLeftWrap = styled.a`
    width: 177px;
    height: 70px;
    background-position: 0% 0%;
    text-indent: -9999px;
`;


export const HeaderTopContentRightWrap = styled.div`
    color: white;
    margin-left: 80px;
    display: flex;
    align-items: center;

    button {
        cursor: pointer;
        font-size: 12px;
        background: transparent;
        height: 32px;
        margin-left: 20px;
    }
    .creation {
        color: #ccc;
        border-radius: 16px;
        border: 1px solid #4F4F4F;
        padding: 0 15px;
    }
    .login {
        color: #787878;
        
    }
`;

export const HeaderBottomLine = styled.div`
    height: 5px;
    background-color: #C20C0C;
`;


